<template>
    <div>
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align':'center'}"
        >
            <el-table-column type="selection" width="55" v-if="isCheckbox"/>
            <el-table-column v-for="(item,index) in tableHeader" :width="item.width" :key="index" :prop="item.prop" :label="item.label">
                <template #default="scope">
                     <!-- 判断是否显示switch开关 -->
                    <div v-if="item.type=='switch'">  
                        <el-switch
                            v-model="scope.row.is_use"
                            class="mb-2"
                            active-color="green"
                            inactive-color="#ccc"
                            :active-value="1"
                            :inactive-value="0"
                            @change="$emit(item.event!,scope.row)"
                        />
                    </div>
                    <!-- 判断是否有操作按钮 -->
                    <div v-else-if="item.type=='button'"> 
                        <span v-for="(btn,index) in item.buttons">
                            <el-button size="small" :type="btn.type" @click="$emit(btn.event,scope.row)">{{btn.text}}</el-button>
                        </span>
                    </div>
                    <!-- 以上都没有就显示基本数据 -->
                    <span v-else>
                        {{item.formatter ? item.formatter(scope.row) : scope.row[item.prop!]}}
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { ElTable } from 'element-plus'
    import type {Conservator} from '../../types/privilege/Conservator'
    // 接收父组件传的参数
    const props=withDefaults(defineProps<{
        isCheckbox?:boolean,
        tableHeader:Conservator []
        tableData:any []
    }>(),{
        isCheckbox:true,
        tableHeader:()=>[],
        tableData:()=>[]
    })

    
//   获取多选框中的数据
    let emit= defineEmits(['delAll'])
    const handleSelectionChange = (val: any) => {
        emit('delAll',val)
    }
  
</script>

<style lang="scss" scoped>

      ::v-deep .el-table__cell{
        padding: 10px 0;
      }
      .el-button{
        padding: 7px 15px;
        margin-left: 10px;
      }
    
</style>